<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>学习进度frame</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <style>
        html, body {
            background-color: #EEEEEE;
            overflow: hidden;
        }
        .mui-table-view .mui-table-view-cell{
            color: black;
        }
        .mui-table-view-cell{
            margin: 0px;
            padding: 0px;
            background-color: #eeeeee;
        }
        .mui-table-view-cell:after{
            height:0
        }
        .padding20{
            padding: 10px;
        }
        .shadow{ box-shadow: 0px 0px 10px rgba(0,0,0,.1);}
        
        .BgSet{
            background-color: white;
            width: 100%;
            height: 110px;
            position: relative;
        }
        .iconSet{
            position: absolute;
            left: 15px;
            top: 15px;
            width: 60px;
            height: 60px;
            border-radius: 35px;

        }
        .nameSet{
            position: absolute;
            left: 15px;
            top: 80px;
            width: 70px;
            height: 20px;
            text-align: center;
            font-size: 14px;
            color: #000000;
        }
        .imgSet{   /* 4个图标公共的设置 */
            position: absolute;
            width: 24px;
            height: 24px;
            top: 60px;
        }
        .taolunImg{  /* 每个次数的图标的位置 */
            
            left: 95px;
        }
        .ceyancanyuImg{
            
            left: 155px;
        }
        .diaochaImg{
            
            left: 215px;
        }
        .worksubmitImg{
            
            left: 275px;
        }
        .timesSet{    /* 4个次数的公共的设置 */
            position: absolute;
            width: 35px;
            height: 20px;
            top: 65px;
            font-size: 14px;
            color: #666666;
            text-align: left;
            /* background-color: yellow; */
        }
        .taolutimes{     /* 每个次数的文字的设置 */
            left: 125px;
        }
        .ceyancanyuimes{
            left: 185px;
        }
        .diaochaimes{
            left: 245px;
        }
        .worksubmittimes{
            left: 305px;
        }
        .progressLine{
            position: absolute;
            left: 95px;
            top: 35px;
            right: 55px;
            height: 10px;
            border-radius: 10px;
            border: 1px solid #29B4EB;
        }
        .progressLineFill{
            position: absolute;
            left: 95px;
            top: 35px;
            width: 0px;
            height: 10px;
            border-radius: 10px;
            background-color: #29B4EB;
            border: 1px solid #29B4EB;
        }
        .progressNum{
            position: absolute;
            top: 30px;
            right: 0px;
            width: 55px;
            height: 20px;
            text-align: left;
            font-size: 14px;
            line-height: 20px;
            vertical-align: middle;
            color: #000000;
            text-align: center;
        }
    </style>
</head>
<body>
       
    <div class="main">

        <ul id="main" class="mui-table-view" hidden="hidden">
           <!-- <li class="mui-table-view-cell padding20">
                <div class="BgSet shadow">
                    <img class="iconSet" src="../../image/icon_teacher_normal.png" alt="">
                    <span class="nameSet">刘洪宇</span>

                    <img class="imgSet taolunImg" src="../../image/discussTimes.png" alt="">
                    <span class="timesSet taolutimes">4次</span>

                    <img class="imgSet ceyancanyuImg" src="../../image/testJoinInTimes.png" alt="">
                    <span class="timesSet ceyancanyuimes">2次</span>

                    <img class="imgSet diaochaImg" src="../../image/suiverTimes.png" alt="">
                    <span class="timesSet diaochaimes">6次</span>

                    <img class="imgSet worksubmitImg" src="../../image/workSubmitTimes.png" alt="">
                    <span class="timesSet worksubmittimes">5次</span>

                    <div id="progressLine" class="progressLine">
                        
                    </div>
                    <div id="progressLineFill" class="progressLineFill">
                            
                    </div>

                    <span class="progressNum">17/25</span>

                </div>

            </li>
            <li class="mui-table-view-cell padding20">
                <div class="BgSet shadow">
                    <img class="iconSet" src="../../image/icon_teacher_normal.png" alt="">
                    <span class="nameSet">王强</span>

                    <img class="imgSet taolunImg" src="../../image/discussTimes.png" alt="">
                    <span class="timesSet taolutimes">4次</span>

                    <img class="imgSet ceyancanyuImg" src="../../image/testJoinInTimes.png" alt="">
                    <span class="timesSet ceyancanyuimes">1次</span>

                    <img class="imgSet diaochaImg" src="../../image/suiverTimes.png" alt="">
                    <span class="timesSet diaochaimes">3次</span>

                    <img class="imgSet worksubmitImg" src="../../image/workSubmitTimes.png" alt="">
                    <span class="timesSet worksubmittimes">2次</span>

                    <div class="progressLine">
                        
                    </div>
                    <div id="progressLineFill" class="progressLineFill">
                            
                    </div>

                    <span class="progressNum">10/25</span>

                </div>

            </li>-->
            
        </ul>
    </div>


    <div class="noSign"   id="noData"  hidden="hidden">
                <img src="../../image/icon_img.png" width="60%">
                <p class="font16 top_15 base_dark_grey" >
                    暂无数据
                </p>
            </div>
            <div class="loadFailure"  id="noNet" hidden="hidden">
                <img src="../../image/icon_img01.png" width="60%">
                <p class="" >
                    数据加载失败
                </p>
                <p>
                    请检查您的网络
                </p>
                <button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
                    重新加载
                </button>
            </div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">

    var page = 1;
    var row = 10;  
    var dataSource = [];  //总展示的数据
    var refreshCount = 0; //刷新条数
    apiready = function () {
        setRefreshHeader();
       
		setPullUpRefresh();
        loadNewData();
//      SendBehaviorTrajectoriesNotifi(0, '课程统计分析', '084');
    };

    //加载最新数据
    function loadNewData() {
        page = 1;

        get_data();
    }

    //加载更多数据
    function loadMoreData() {
        page++;
        get_data();
    }

    //加载失败点击了刷新按钮
    function RefreshData() {
        $('#noNet').hide();
        //加载最新数据
        loadNewData();
    }

    /*请求数据*/
    function get_data() {
        /*显示提示框*/
        showProgress();
        var param = {};
        var jid='';
        var  isxueba = api.pageParam.isxueba;
        if(isxueba ==1){//学霸赛
          jid = 419;
        }else{
          jid = $api.getStorage('cfnetppjxid');
        }
        var params = {
                jid : jid,
                uid : $api.getStorage("cfnetppuid"),
                pid : api.pageParam.pid,  
                cid : api.pageParam.cid,  
                page : page,
                rows : row,
            };
        var params2 =  {
                chapterid : api.pageParam.vid,
                jid : jid,
                uid : $api.getStorage("cfnetppuid"),
                pid : api.pageParam.pid,  
                cid : api.pageParam.cid, 
                page : page,
                rows : row,
        }
        var str = "";
        if (api.pageParam.isCirclesIn == 1) {  //从章节列表 圆圈点击进的
            str = url_getVideodetailtj;
            param = params2;
        } else {
            str = url_getTongji;
            param = params;
        }
//       alert(page);
//         alert(JSON.stringify(param));

        cfnetppPOST(str, param, true, function(data, status) {
            api.hideProgress();
            api.refreshHeaderLoadDone();
            if (status == 'success') {
                $('#noData').hide();
                $('#noNet').hide();
                $('#main').show();
                if (data.code == 200) {
//                     alert(JSON.stringify(data));
                    
                    /*coursetype  :  2108是自由课程  2109是慕课*/
                    var get_data = "";  //所有的要展示的信息

                    if (api.pageParam.isCirclesIn == 1) {
                        get_data = data.data.study.uname;
                    } else {
                        get_data = data.data[0].uname;
                    }

                    refreshCount = get_data.length; //刷新条数赋值

                    if (get_data != '' && get_data.constructor == Array && get_data.length > 0) {

                            var total = "";

                            if (api.pageParam.isCirclesIn == 1) {
                                total = data.data.allchapternum;
                            } else {
                                total = data.data[0].zshu;
                            }


                            initFrame(get_data,total);


                    }else{
                        if (page == 1) {
                            $('#noData').show();
                            $('#noNet').hide();
                        }

                    }
                    
                    

                } else {
                   
                }
            } else {
                $('#noNet').show();
                $('#main').hide();
                $('#noData').hide();
            }
        });

    }
    function initFrame(data,total) {
        var str = "";
        // alert(JSON.stringify(data));
        // alert(total);
        
        var tmpColorProgressArr = [];  //存放学习进度不等于1的同学

        for (var i = 0; i < data.length; i++) {
            var datacell = data[i];

            // var index = dataSource.length + i;   //zuo'wei

            var colorProgress = "";
            // alert("--"+i+"--"+datacell.yjshu);
            if (datacell.yjshu > 0) {
                colorProgress = '<div id="progressLineFill'+datacell.uid+'" class="progressLineFill">'+'</div>';
                // alert(datacell.uid);
                tmpColorProgressArr.push(datacell);
            }
            if (datacell.yjshu >= total) {
                datacell.yjshu = total;
            }
            str += '<li class="mui-table-view-cell padding20">'+
                '<div class="BgSet shadow">'+
                    '<img class="iconSet" src="'+HeadPortraitIsNull(datacell.picurl)+'" alt="">'+
                    '<span class="nameSet">'+datacell.rename+'</span>'+

                    '<img class="imgSet taolunImg" src="../../image/discussTimes.png" alt="">'+
                    '<span class="timesSet taolutimes">'+datacell.tlnum+'次</span>'+

                    '<img class="imgSet ceyancanyuImg" src="../../image/testJoinInTimes.png" alt="">'+
                    '<span class="timesSet ceyancanyuimes">'+datacell.cynum+'次</span>'+

                    '<img class="imgSet diaochaImg" src="../../image/suiverTimes.png" alt="">'+
                    '<span class="timesSet diaochaimes">'+datacell.dcnum+'次</span>'+

                    '<img class="imgSet worksubmitImg" src="../../image/workSubmitTimes.png" alt="">'+
                    '<span class="timesSet worksubmittimes">'+datacell.zynum+'次</span>'+

                    '<div id="progressLine" class="progressLine">'+
                        
                    '</div>'+colorProgress+

                    '<span class="progressNum">'+datacell.yjshu+'/'+total+'</span>'+

                '</div>'+

            '</li>';
            
        }

        if (page == 1) {
            $('#main').html(str);
        } else {
            $('#main').append(str);
        }
        $('#main').show();

        // alert(JSON.stringify(tmpColorProgressArr));
        var fullLength = $('.progressLine').width();
        for (var i = 0; i < tmpColorProgressArr.length; i++) {
            if (tmpColorProgressArr[i].yjshu >= total) {
                tmpColorProgressArr[i].yjshu = total;
            }
            $('#progressLineFill'+tmpColorProgressArr[i].uid).width(fullLength*tmpColorProgressArr[i].yjshu/total);
        }


    } 

    function percentNum(num, num2) { 
         return (Math.round(num / num2 * 10000) / 100.00 + "%"); //小数点后两位百分比
    }

    
</script>
</html>